import React, { useReducer, useEffect } from 'react'
import { initState, reducer, actions } from "./cate"
// 引入api
import { reqCateGoods, reqCateList } from "../../request/api";
// 引入css样式
import "./cate.css"

import CateList from "./components/CateList"
import CateGoods from "./components/CateGoods"

export default function Cate(props) {
    const [state, dispatch] = useReducer(reducer, initState);
    //相当于生命周期
    useEffect(() => {
        reqCateList().then(res => {
            if (res.data.code === 200) {
                dispatch(actions.changeCateList(res.data.list))
                reqCateGoods({ fid: res.data.list[0].id }).then(res => {
                    if (res.data.code === 200) {
                        dispatch(actions.changeCateGoods(res.data.list))
                    }
                })
            }
        })
    }, []);
    let req=(id)=>{
        reqCateGoods({ fid: id }).then(res => {
            if (res.data.code === 200) {
                dispatch(actions.changeCateGoods(res.data.list))
            }
        })
    }
    return (
        <div className="cate">
            <h3>商品分类</h3>
            <div className="search">
                <div className="searchBox">
                    <input type="text" placeholder="搜索内容" />
                    <span>搜索</span>
                </div>
            </div>
            <div className="main">
                <ul className="cateList">
                    <CateList cateList={state.cateList} req={req}></CateList>
                </ul>
                <div className="cateGoods">
                    <CateGoods cateGoods={state.cateGoods} history={props.history} ></CateGoods>
                </div>
            </div>
        </div>
    )
}
